<template>
    <div class="container">
        <div class="operateblock">
            <el-form :inline="true" :model="state.formInline" class="demo-form-inline" ref="operateRef">
                <el-form-item prop="searchVal">
                    <el-input v-model="state.formInline.searchVal" placeholder="角色名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="initData">查询</el-button>
                    <el-button :icon="Refresh" @click="reset(operateRef, initData)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="tableblock">
            <div class="crudblock">
                <el-button type="primary" :icon="Plus" @click="handleDialog('新增角色')">新增</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="name" label="角色名称" align="center" min-width="100px" />
                <el-table-column prop="remark" label="备注" align="center" min-width="150px" />
                <el-table-column prop="permissions_list" label="权限列表" align="center" min-width="180px" />
                <el-table-column prop="create_time" label="创建时间" align="center" min-width="165px">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.create_time) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="200px" fixed="right">
                    <template #default="scope">
                        <el-button :icon="Edit" @click="handleDialog('编辑角色', scope.row)">编辑</el-button>
                        <el-popconfirm width="200px" @confirm="deleteFn(scope.row._id)" confirm-button-text="Yes" :icon="InfoFilled" icon-color="#F56C6C" title="确认是否删除?">
                            <template #reference>
                                <el-button type="danger" :icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="curPage" v-model:page-size="pageSize" />
        </div>

        <!-- 表单对话框 -->
        <formDialog v-model:dialogState="dialogState" :dialogConfig="dialogConfig" :formConfig="formConfig" />
    </div>
</template>

<script setup>
import { Search, Refresh, Plus, Edit, InfoFilled, Delete, EditPen } from '@element-plus/icons-vue'
import { reactive, ref, computed, onMounted, onBeforeMount } from 'vue'
import formDialog from '@/components/formDialog.vue'
import useTableList from '@/hooks/useTableList.js'
import { roleList, roleCreate, roleUpdate, roleDelete, roleMenuOptions } from '@/api/index.js'
import { formatDate } from '@/utils/utils.js'
import mitt from '@/utils/mitt'

const operateRef = ref(null)
const state = reactive({
    formInline: {
        searchVal: ''
    }
})
let menuOptions = ref(null)

const { loading, initData, tableData, total, curPage, pageSize, reset, dialogState, dialogConfig, handleDialog } = useTableList(roleList, state.formInline)

// 监听表单提交事件
mitt.on('submit', res => {
    onSubmit(res)
})

// 创建 OR 编辑
const onSubmit = async (d) => {
    let res = dialogConfig.title == '新增角色' ? await roleCreate(d) : await roleUpdate(d)
    initData()
    dialogState.value = false
    ElMessage.success(res)
}

// 删除
const deleteFn = async (id) => {
    let res = await roleDelete({ id })
    initData()
    ElMessage.success(res)
}

let formConfig = computed(() => {
    return {
        labelWidth: '80px',
        rules: {
            name: [
                { required: true, message: '不能为空!', trigger: 'blur' },
            ]
        },
        items: [
            { label: '角色名称', type: 'text', name: 'name' },
            { label: '备注', type: 'textarea', name: 'remark' },
            {
                type: 'tree',
                name: 'permissions_list',
                props: {
                    'node-key': "_id",
                    'data': menuOptions.value,
                    'show-checkbox': true,
                    'default-expand-all': true,
                    'props': {
                        label: 'name'
                    }
                }
            }
        ]
    }
})

onBeforeMount(async () => {
    let res = await roleMenuOptions()
    menuOptions.value = res.data
})


</script>

<style lang='scss' scoped></style>